<template>
    <div id="searchCourse">
        <header>
            <i @click="goBack()"></i>
            <div>搜索课程</div>
        </header>
        <div class='searchbox'>
            <div class='search'>
                <div>
                    <input type="text" placeholder="请输入课程名称搜索" v-model='searchKey'>
                </div> 
                <span @click='getSearchList(sentPage)'>搜索</span>
            </div>
        </div>
        <ul>
            <Loadmore
				:bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded" ref="loadmore"
                :autoFill="false"
			>
            <div class='mc' v-if="list.length<1">
                <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
                <p>未找到该名称相关课程!</p>
            </div>
            <li v-for='(item,index) in list' :key='index' v-if="list.length>0">
                <router-link :to="{name: 'homeDetail',query: {id: item.id}}">
                    <img :src="item.course_pic" width='117' height="82" />
                    <div>
                        <h3>{{item.course_name}}</h3>
                        <span>主讲老师: {{item.username}}</span>
                        <span>开课时间: {{item.starttime}}</span>
                        <p>
                            <span>{{item.iffree=='free'?"免费":(item.discount?item.discount:item.charge)}}</span>
                            <s>{{item.charge}}元</s>
                            <!-- <i>2045人想学</i> -->
                        </p>
                    </div>
                </router-link>
            </li>
        </Loadmore>
        </ul>
    </div>
</template>
<script>
    import {Loadmore} from 'mint-ui';
    export default {
        data() {
            return {
                list: [1,2],
                sentPage:{
                    page : 1,//分页累加
                },//接口入参
                totalNum: 0, //总数据条数
                allLoaded: false,					//分页数据是否已经加载完毕
                searchKey: '',
                isSearch: false, //列表是否为查询列表 默认否 显示全部列表
            }
        },
        components: {
            Loadmore
        },
        methods: {
            goBack() {
                this.$router.back();
            },
            //默认获取所有获取搜索课程
            getSearchList(params) {
                console.log(this.searchKey);
                this.$api.post(this.$api.baseURLSchool,"selecttype_view/view_course_user/1?course_name="+this.searchKey,params,r => {
                    console.log(r);
                    this.totalNum = r.data.records;
                    if(this.sentPage.page==1) {
                        this.list = r.data.rows;
                    }else {
                        this.list = this.list.concat(r.data.rows);
                    }
                    if(r.data.rows.length == 0 && this.sentPage.page>1) {
                        this.$utils._toast("暂无更多数据");
                    }
                   
                },err => {
                    console.log(err);
                })
            },
            //上拉加载
            loadBottom() {
                (this.sentPage.page)++;
                
                setTimeout(() => {
                    this.getSearchList(this.sentPage);    
                }, 20);
                if(this.totalNum == this.list.length) {
                    this.allLoaded = true;
                }
                this.$refs.loadmore.onBottomLoaded();
            }
        
        },
        created() {
            this.getSearchList(this.sentPage);
        }
    }

</script>
<style lang="scss" scoped>
    .mc {
		padding: 40px 0;
		margin: auto;
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%,-50%);
		img {
			display: block;
			margin: 0 auto;
		}
		p {
			padding-top: 10px;
			text-align: center;
		}
	}
</style>